<template>
    <div class="shop-container">
      <ul class="shop-lsit">
        <li class="shop-list-item" v-for="(goods,index) in goodslist" :key="index">
          <img :src="goods.image_url" alt="" width="100%">
          <h4 class="list-item-title">{{goods.goods_name}}</h4>
          <div class="list-item-bottom">
            <span class="item-price">￥{{goods.group.price}}</span>
            <span class="item-count">{{goods.sales_tip}}</span>
            <span class="item-users">
              <img :src="userAvatar.avatar" alt="" v-for="(userAvatar,index1) in goods.bubble" :key="index1">
            </span>
            <span class="item-buy"><button>去拼单&nbsp;></button></span>
          </div>
        </li>
      </ul>
    </div>
</template>

<script>
    import {mapState} from 'vuex'
    export default {
        name: 'HotShopList',
        computed:{
          ...mapState(['goodslist'])
        }
    }
</script>

<style scoped lang="stylus" ref="stylesheet/stylus">
  .shop-container
    padding-bottom 50px
    background-color: #f5f5f5
    .shop-lsit
      .shop-list-item
        display flex
        flex-direction column
        margin-bottom 10px
        background-color: #fff
        .list-item-title
          line-height 22px
          width 94%
          margin-left 3%
          height 44px
          overflow hidden
        .list-item-bottom
          margin 10px 0
          display flex
          flex-direction row
          justify-content space-around
          align-items center
          .item-price
            color red
            font-size 18px
            text-align center
            font-weight 700
            flex: 1
          .item-count
            flex 2
            font-size 12px
            color #ccc
          .item-users
            flex 1
            display flex
            justify-content center
            align-items center
            img
              width 30px
              border-radius 50%
            img:nth-child(2)
              margin-left -16px
          .item-buy
            flex 2
            button
              width 80%
              font-size 15px
              border none
              height 34px
              color #fff
              display flex
              justify-content center
              align-items center
              background-color: red
              margin-left 10px
              border-radius 8px
</style>
